import { List,Radio } from 'antd';
import { CloseOutlined, CodepenOutlined } from '@ant-design/icons'
import classNames from 'classnames'
import { todoType } from '../model'
import { observer } from 'mobx-react'
import React from 'react';
import { useStore } from '../store'
const {Item} = List;

interface TodoListProps {
    // todos: todoType[];
    // onDelete: (id:number) => void;
    // onChange: (id:number) => void;
}

const TodoList:React.FC<TodoListProps> = () => {
    const { 
        todoStore: {
          todos,
          onDelete,
          onChange
        }
      } = useStore()
    console.log('todoList start...')
    return (
        <div className="list-wrap">
            { todos.length ===0? (
                <p>暂无代办事项</p>
            ):(
                <List 
                    itemLayout="horizontal"
                    dataSource={todos}
                    renderItem={(item => (
                        <ListItem item={item} onDelete={onDelete} onChange={onChange} />
                    ))}
                />
            )}
        </div>
    )
}

interface ListItemProps {
    item: todoType;
    onDelete: (id:number) => void;
    onChange: (id:number) => void;
}

const ListItem:React.FC<ListItemProps> = observer((props)=>{
    const { item, onDelete, onChange} = props;
    const className = classNames({
        // 配置类名 为true 添加上去
        "list-item":true,
        "list-item__finished":item.finished
    })
    console.log('ListItem start...')
    return(
        <Item className={className}>
            <Radio checked={item.finished} onClick={() => onChange(item.id)}/>
            <div className="list-item-wrap ">
                <span className="list-item-text">{item.text}</span>
                <CloseOutlined onClick={() => onDelete(item.id)}/>
            </div>
        </Item>
    )
})

export default observer(TodoList)
